<template>
  <div class="billList">
    <el-table
      :data="tsRuleListDto"
      style="width: 100%"
      :border="true"
      :highlight-current-row="true"
    >
      <el-table-column label="缴费人" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.appuser_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="缴费时间" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.rule_time }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.rule_phone }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="区域" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.appuser_area }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="房屋" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.appuser_house }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="房屋面积" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rule_household }}m²</span>
        </template>
      </el-table-column>
      <el-table-column label="缴费总额" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.rule_total }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="计费规则" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.payment_id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="缴费方式" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.rule_paymethod }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.rule_remarks }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message, popconfirm } from 'element-ui'
import { getToken, getAccount } from '@/utils/auth'
export default {
  data() {
    return {
      tsRuleListDto: [],
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageNum: 1, // 总数页数
      total: 0
    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getAll()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getAll()
    },
    // 获取列表
    getAll() {
      return request({
        url: '/v3/TsRule/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: {
          current_page: this.currentPage,
          page_size: this.pagesize,
          rule_id: 0
        }
      }).then(res => {
        var tsRuleListDto = res.tsRuleListDto
        this.currentPage = res.current_page
        this.pageNum = res.pages
        this.total = res.total_record
        this.tsRuleListDto = []
        tsRuleListDto.map((value, index) => {
          var d = new Date(value.rule_time)
          value.rule_time =
            d.getFullYear() +
            '-' +
            (d.getMonth() + 1) +
            '-' +
            d.getDate() +
            ' ' +
            d.getHours() +
            ':' +
            d.getMinutes() +
            ':' +
            d.getSeconds()
          this.tsRuleListDto = res.tsRuleListDto
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.billList {
  margin-top: 50px;
  overflow: hidden;
}
</style>
